$(function(){
	//声明服务端跟地址
	var baseurl='http://music.softeem.top/'
	//声明一个数组用于存储获取到的歌曲信息
	var musics=[];
	//声明变量表示当前正在播放的歌曲索引
	var current=0;
	//创建一个audio元素（<audio>标签）
	//var player
	var player=$('<audio>');
	//声明歌曲播放的状态标记，用于记录歌曲是否在播放（默认未播放）
	var isPlaying=false;
	//声明临时变量表示当前播放时长和总时长（秒）
	var now=0;
	var total=0;
	/*alert('hello jq')页面弹出对话框*/
	//使用ajax请求服务端数据（xmlHttpRequest）
	//Restful get post put delete
	//js是一门弱类型语言：定义变量无需指定数据类型
	$.getJSON(baseurl+'list',function(data){
// 在控制台输出数据 data为字符串
		/*json解析字符串为对象（数组）
		data=JSON.parse(data);
		console.log(data);*/
		musics=data;
		//对数据渲染
		render(musics);
	})
//将获取导的音乐数据在页面中渲染
	function render(musics){
		var html='';
		//对数组遍历
		$.each(musics,function(i,m){
			//i:索引 m：歌曲对象
			//获取歌曲名称和大小
			var name=m.name;
			var size=m.size;   //1mb=1024kb  1kb=1024byte
			size=fmtSize(size);
			//`1左边的
			//es6语法
			html += `<div class="item" data-index="${i}">
				<div class="item-name">${name}</div>
				<div class="item-size">${size}</div>
			</div>`
			
		})
		console.log(html);
		//将生成的html代码插入导列表区域（class="body"）
		//将body中的html变成这里的html
		$('.body').html(html);
		
	}
	//对歌曲的大小格式化（byte转化为mb）
	function fmtSize(size){
		size=size/(1024*1024);
		//截取小数点后一位
		size=size.toFixed(1);
		return size+'MB';
	}
	//为歌曲列表项绑定事件（事件委托机制）
	//根据类元素器选择
	$('.body').on('click','.item',function(){
		//将上一首在播放的歌曲状态还原
		$(this).parent().find('.item:eq('+current+')').removeClass('isPlaying');
		//获取需要播放的歌曲索引
		current=$(this).data('index');
		//获取需要被播放的歌曲对象
		var m=musics[current];
		//为播放器对象设置src属性（播放源）
		player.prop('src',baseurl+m.path);
		//为当前选中歌曲列表添加类（设置背景高亮）
		//$(this).addClass('isPlaying');
		//标记处于播放状态
		isPlaying=true;
		startPlay();
	})
	//开始播放
	function startPlay(){
		//将jquery转换为js对象，并调用play实现播放
		player[0].play();
		//将图标切换回暂停的图标
		$('.music-btn').css('background-image','url(./img/pause.png)');
		//显示歌曲名到底部控制区域
		$('.music-name').text(musics[current].name);
		$('.body').find(`.item:eq(${current})`).addClass('isPlaying');
	}
	//为按钮绑定事件实现歌曲的继续播和暂停
	$('.music-btn').on('click',function(){
		if(isPlaying){
			//暂停
			player[0].pause();
			//变为播放图标
			$('.music-btn').css('background-image','url(./img/play.png)');
		}else{
			//播放
			startPlay();
		}
		//播放状态取反
		isPlaying=!isPlaying;
		})
		//监听当播放器要播放的音乐第一帧加载后触发（播放器准备开始播放时执行）
		player.on('loadeddata',function(){
			//获取当前播放音乐文件的总时长
			total=this.duration;
			//显示总时长到界面中
			$('.time-total').text(fmtTime(total));
		})
		//当播放器的currentTime属性值发生变化时执行
		player.on('timeupdate',function(){
			//获取当前播放时间
		now=this.currentTime;
		//计算获取进度条的宽度
		var progress=now/total*100 +'%';
		//设置进度条宽度
		$('.progress-bar').css('width',progress);
		//显示当前时长到时间显示区域
		$('.time-now').text(fmtTime(now));
		})
			//将以秒为单位时长格式化为mm:ss->03:04
		function fmtTime(time){
			time=time*1000;
			var date=new Date(time);
			//获取分钟
			var m=date.getMinutes();
			//获取秒
			var s=date.getSeconds();
			m=m<10 ? '0' + m : m;
			s=s<10 ? '0' + s : s;
			return m+':'+s;
		}
		//当歌曲播放完成后执行一下函数
		player.on('ended',function(){
			//将上一首正在播放完成的歌曲背景高亮去除
			$('.body').find(`.item:eq(${current})`).removeClass('isPlaying');
			//切换下一首（默认列表循环）
		current=++current % musics.length;
		//重新设置播放源
		player.prop('src',baseurl+musics[current].path);
		startPlay();
		})
		//随机播放点击事件
		$('.kongzhi-btn').on('click',function(){
			$('.body').find(`.item:eq(${current})`).removeClass('isPlaying');
		current=getRandomInt(1,20);
		//重新设置播放源
		player.prop('src',baseurl+musics[current].path);
		startPlay();
			})
			function getRandomInt(min, max) {
			  return Math.floor(Math.random() * (max - min)) + min;
			}
})